<template>  
  <div class="login-container">  
    <div class="login-background"></div> <!-- 背景层 -->  
    <h2>欢迎来到中国风音乐平台</h2>  
    <h2>用户登录</h2>  
    <el-form :model="loginForm" ref="loginForm" label-width="80px">  
      <h4>还没有账号？&nbsp;<button @click="navigateTo('/register')">注册账号</button></h4>  
      <!-- 账号输入框 -->  
      <el-form-item label="用户名" prop="user_name">  
        <el-input v-model="loginForm.user_name" placeholder="请输入账号" style="width: 400px;"></el-input>  
      </el-form-item>  

      <!-- 密码输入框 -->  
      <el-form-item label="密码" prop="password">  
        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" style="width: 400px;"></el-input>  
      </el-form-item>  

      <!-- 登录按钮 -->  
      <div class="full-width">   
        <el-button  @click="login">登录</el-button>  
      </div>   

      <!-- 错误信息显示 -->  
      <p v-if="errorMessage" class="error">{{ errorMessage }}</p>  
    </el-form>  
    
    <!-- 最新登录记录显示 -->  
    <div v-if="latestLog">  
      <p>最新登录记录：</p>  
      <p>用户名：{{ latestLog.user_name }}</p>  
      <p>登录时间：{{ latestLog.createDate }}</p>  
    </div>  
  </div>  
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import router from '../router/index.js';

export default {
  data() {
    return {
      loginForm: {
        user_name: '',  // 账号
        password: '',  // 密码
      },
      errorMessage: '',  // 错误信息
      latestLog: null,  // 最新登录记录
    };
  },
  methods: {
    navigateTo(route) {  
           this.$router.push(route);  
       },  
    // 登录请求
    async login() {
      const formdata = new FormData();
      formdata.append("user_name", this.loginForm.user_name);
      formdata.append("password", this.loginForm.password);

      try {
        const response = await axios.post('http://localhost:8080/v1/right', formdata);
        if (response.data && response.data.user_id) {
            localStorage.setItem('user', JSON.stringify(response.data));
            localStorage.setItem('user_id', response.data.user_id);
            localStorage.setItem('user_name', this.loginForm.user_name);
            localStorage.setItem('user_id', response.data.user_id);
            sessionStorage.setItem('user_id', response.data.user_id);
            console.log("User ID:", response.data.user_id);
            ElMessage.success("欢迎进入用户页面");
            
            // 跳转到FirstPage页面，带上user_id作为查询参数
            this.$router.push({
              path: '/FirstPage',
              query: { user_id: response.data.user_id }  // user_id 作为查询参数传递
            });
        } else {
            this.errorMessage = '账号或密码错误';
            ElMessage.error('登录失败');
        }
      } catch (error) {
        console.error('登录请求失败:', error);
        // this.errorMessage = '服务器连接失败，请稍后再试';
        ElMessage.error('请输入账号和密码');
      }
    },

    // 获取最新的登录记录
    async getLatestLog(userId) {
      try {
        const logResponse = await axios.get(`http://localhost:8080/log/logs/{userId}`);
        this.latestLog = logResponse.data[0];  // 假设返回的是一个数组，取第一个元素
      } catch (error) {
        console.error('获取最新登录记录失败', error);
      }
    }
  },
};
</script>

<style>



</style>
<style scoped> 
/* 新增背景样式 */  
.login-background {  
  position: absolute; /* 绝对定位 */  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  background-image: url('/images/bg1.jpg'); /* 确保路径正确 */  
  background-size: cover;  
  background-position: center;  
  background-repeat: no-repeat;  
  z-index: -1; /* 确保背景在内容后面 */  
}   
.login-container {  
  width: 500px;  
  margin: 180px auto;  /* 上边距100px，左右自动居中 */  
  padding: 20px;  
  background: #f9f4e8;  
  border-radius: 8px;  
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
  font-family: 'KaiTi', serif; /* 使用中国风字体 */  
  text-align: center;  
}  

h2 {  
  font-size: 24px;  
  font-weight: bold;  
  color: #4b3f33;  
  letter-spacing: 2px;  
  margin-bottom: 30px;  
  font-family: 'KaiTi', serif; /* 中国风字体 */  
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); /* 字体阴影效果 */  
}  

.el-form-item {  
  margin-bottom: 20px;  
}  

.el-button {  
  text-align: center; 
  font-size: 20px;  
  font-family: 'KaiTi', serif; /* 中国风字体 */  
}  

.error {  
  color: red;  
  margin-top: 10px;  
  font-size: 20px;  
}  

.full-width {  
  display: flex;  
  align-items: center;  
  justify-content: center; /* 中心对齐 */  
}  

h4 {
  font-weight: normal; /* 不加粗 */
}
/* 调整"注册账号"按钮的样式 */
button {
  font-size: 14px; /* 字体调大 */
  padding: 5px 10px; /* 增加按钮的内边距 */
}
</style>